<template>
	<div>
		<mt-header title="登录">
		  <router-link to="/" slot="left">
			<mt-button icon="back">back</mt-button>
		  </router-link>
		</mt-header>
		<ul class="order_head order_head_after login_head">
			<li :class="login_tel?'active':''" @click="forgotLogin()"><span>密码登录</span></li>
			<li :class="login_yanzheng?'active':''" @click="yanzhengLogin()"><span>验证码登录</span></li>
		</ul>
		<div v-show="login_tel">
			<div class="login_tel" >
				<i class="iconfont icon-shouji"></i>
				<input type="text" placeholder="请输入手机号"  v-model="userPhone" class="userphone" />
			</div>
			<div class="login_psd">
				<i class="iconfont icon-suo"></i>
				<input type="password" placeholder="请输入密码" v-model="userPassword" class="password" />
			</div>
			<div class="login_btn" @click="loginBtn()">
				登录
			</div>
		</div>
		<div v-show="login_yanzheng">
			<div class="login_tel" >
				<i class="iconfont icon-shouji"></i>
				<input type="text" placeholder="请输入手机号" class="userPhone" />
			</div>
			<div class="login_psd login_yz">
				<i class="iconfont icon-iconzhenghe0729fuzhi93"></i>
				<input type="tel" placeholder="验证码" class="yanzheng" />
				<button class="btn">获取验证码</button>
			</div>
			<div class="login_btn2" @click="loginBtn2()">
				登录
			</div>
		</div>
		<p class="forget_psd"><span class="register">注册</span><span style="color: #b3b3b3;">忘记密码?</span></p>
		<div class="father_warp">
			<p class="other_login">
				<span>或者，使用第三方账号登录 </span>
			</p>
			<div class="weixin" id="QQ">
				<i class="iconfont icon-weixin"></i>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		name: 'Login',
		data() {
			return {
				login_tel:true,
				login_yanzheng:false,
				userPhone:'',
				userPassword:''
			}
		},
		created() {
			this.$emit('footer', false)
		},
		components:{
			
		},
		methods:{
			forgotLogin(){
				this.login_tel = true
				this.login_yanzheng = false
			},
			yanzhengLogin(){
				this.login_tel = false
				this.login_yanzheng = true
			},
			loginBtn(){
				let userPhone = this.userPhone
				let userPassword = this.userPassword
				let reg = new RegExp(/^1[34578]\d{9}$/);
				if(!userPhone){
					Toast({
						message:'手机号不能为空',
						duration:2000
					})
				}else if(!reg.test(userPhone) || userPhone.length != 11){
					Toast({
						message:'请输入正确的手机号',
						duration:2000
					})
				}else if(!userPassword){
					Toast({
						message:'请输入密码',
						duration:2000
					})
				}else{
					this.$axios.get('Login/login',{
						params:{
							mobile:userPhone,
							password:userPassword,
							type:2
						}
					})
					.then(res=>{
						console.log(res)
					})
					.catch(err=>console.log(err))
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.wh(@w, @h) {
		width: @w;
		height: @h;
	}
	.login_head {
	    .wh(100%,1.6rem);
	    color: #B3B3B3;
		border-bottom: 0.2rem solid #F6F6F6;
	    li {
	        .wh(50%,1.6rem);
	        line-height: 1.6rem;
	        font-size: 0.36rem;
			float: left;
			text-align: center;
	        span {
	            border: 0;
	        }
	    }
	    .active {
	        border-bottom: 0.01rem solid #FE8A76;
	        span {
				color: #FE8A76;
	            border: 0;
	        }
	    }
	}
	.login_tel,
	.login_psd {
	    margin: 0 5%;
	    padding: 0.3rem 0;
	    box-sizing: border-box;
	    .wh(90%,1.4rem);
	    border-bottom: 0.01rem solid #F6F6F6;
	    input {
	        border: 0;
			height: 0.8rem;
	        width: 60%;
			padding-left: 0.3rem;
			font-size: 0.4rem
	    }
	    i {
			font-size: 0.46rem;
	        color: #B3B3B3;
	    }
	    button {
	        border: 0;
	        float: right; //     margin-right: 0.1rem;
	        //      color: #B3B3B3;
	        background: #fff;
	        text-align: center;
	    }
	}
	.login_btn,
	.login_btn2 {
	    .wh(90%,1.2rem);
	    background: #FE8A76;
	    text-align: center;
	    line-height: 1.2rem;
	    border-radius: 0.1rem;
	    margin: 0.48rem 5%;
	    font-size: 0.4rem;
	    color: #fff;
	}
	.forget_psd {
	    text-align: right;
	    font-size: 0.34rem;
	    margin-right: 5%;
	    color: #B3B3B3;
	    span {
	        color: #FE8A76;
	    }
	    .register{
	        color: #B3B3B3;
	        float: left;
	        margin-left: 5%;
	    }
	}
	.father_warp {
	    .wh(100%,3rem);
	    position: relative;
	    margin-top: 1rem;
	}
	.other_login {
	    color: #F6F6F6;
	    position: absolute;
	    bottom: 2.5rem;
	    text-align: center;
	    float: left;
	    .wh(100%,0.5rem);
	    text-align: center;
	    img {
	        margin-top: 0.2rem;
	        width: 1.56rem;
	    }
	    span {
	        font-size: 0.34rem;
	        line-height: 0.5rem;
	        color: #404040;
	    }
	}
	.weixin {
	    .wh(100%,1rem);
	    text-align: center;
	    position: absolute;
	    bottom: 1rem;
	    color: #4aa71e;
	    .iconfont {
	        font-size: 1rem;
	    }
	}
	.submit_btn {
	    margin: 0.3rem 5%;
	}
</style>
